<!--
 * @Author: DUST
 * @Date: 2023-05-17 17:22:37
 * @LastEditors: DUST
 * @LastEditTime: 2023-05-31 14:21:28
 * @FilePath: \vite-project\src\views\admin\tagsManage\index.vue
 * @Description: 
 * undefined
-->
<template>
  <admin-page-template>
    <div class="tableHeader mt10">
      <div class="flex"></div>
      <div class="flex">
        <table-top-btns :list="buttonList" />
      </div>
    </div>
    <div class="tagsContent">
      <a-tag
        class="tag"
        :color="item.color"
        v-for="item of tagList"
        :key="item.id"
        :class="{ cShake: isShake && shakeIds.includes(item.id) }"
        @mouseenter="doShake(item)"
        @dblclick="showEdit(item)"
        @mousedown="pressHold(item)"
        @mouseup="pressUp"
      >
        <a-popconfirm
          title="请确认是否删除该节点"
          :visible="delVisible && delData?.id == item.id"
          @cancel="cancelPop"
          @confirm="confirmDel"
        >
          {{ item.name }}
        </a-popconfirm>
      </a-tag>
    </div>
    <!-- 新增弹窗 -->
    <addTagModal
      v-if="visible"
      v-model:visible="visible"
      :type="type"
      :loading="loading"
      :data="editData"
      @ok="doOk"
    />
  </admin-page-template>
</template>

<script setup lang="ts">
import addTagModal from "../components/addTagModal.vue";
import TagsManage from "./";

const {
  tagList,
  // 按钮合集
  buttonList,
  // 弹窗
  type,
  loading,
  visible,
  editData,
  showEdit,
  doOk,
  //  抖动
  isShake,
  shakeIds,
  doShake,
  // 长按
  pressHold,
  pressUp,
  delVisible,
  delData,
  confirmDel,
  cancelPop
} = new TagsManage();
</script>

<style lang="less" scoped>
.tagsContent {
  width: 100%;
  height: calc(100% - 60px);
  display: flex;
  flex-direction: row;
  // align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  user-select: none;
  padding: 0 30px;
  box-sizing: border-box;
  .tag {
    height: 35px;
    font-size: 18px;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    // box-sizing: border-box;
  }
  @keyframes shake {
    10%,
    90% {
      transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
      transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
      transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
      transform: translate3d(4px, 0, 0);
    }
  }

  .cShake {
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
  }
}
</style>
